<template>
  <div class="shopcart">
    <div class="content">
      <!-- 1.1.0 购物车左边 -->
      <div class="content-left" @click="showCartContent">
        <div
          class="logo-wrapper"
        >
          <!-- 1.1.1 购物车图标 -->
          <div class="logo"  :class="{ highlight: this.$store.state.count > 0 }">
            <span
              class="icon-shopping_cart"
              :class="{ highlight: this.$store.state.count > 0 }"
            ></span>
          </div>
          <!-- 1.1.2 购物车商品数量 -->
          <div class="num" v-show="num">{{ num }}</div>
        </div>
        <!-- 1.2.0 结算金额 -->
        <div class="price" :class="{ highlight: this.$store.state.count > 0 }">
          ￥{{ totalPrice }}
        </div>
        <!-- 1.3.0 结算详情-->
        <div class="desc" :class="{ highlight: this.$store.state.count > 0 }">
          {{
            totalPrice > 3 ? "满免配送费" : "另需配送费￥" + (3 - totalPrice)
          }}
        </div>
      </div>
      <!-- 2.0 右边  -->
      <div class="content-right">
        <div class="pay" :class="{ highlight: this.$store.state.count > 0 }">
          {{ pay }}
        </div>
      </div>
    </div>
    <!-- 购物车详情 -->
    <cartcontent
      v-show="showContent && this.$store.state.count > 0"
      :showContent="showContent"
      @showCartContent="showCartContent"
    />
  </div>
</template>

<script>
import cartcontent from "./cartcontent";
export default {
  name: "shopcart",
  props: [],
  data: () => ({
    showContent: false,
    total: 0,
    delPrice: 3, // 配送费
  }),
  components: {
    cartcontent,
  },
  methods: {
    showCartContent() {
      this.showContent = !this.showContent;
    },
  },
  computed: {
    totalPrice() {
      let state = this.$store.state;
      let totalPrice = 0;
      state.cart.forEach((item) => {
        totalPrice += item.count * item.price;
      });
      if (totalPrice >= 28) {
        totalPrice -= 5; // 满28-5
      }
      this.total = totalPrice;
      return totalPrice;
    },
    num() {
      return this.$store.state.count;
    },
    desc() {
      if (this.total >= 20) {
        return "满免配送费";
      } else {
        return "另需配送费￥" + this.delPrice + "元";
      }
    },
    pay() {
      if (this.total >= 20) {
        return "去结算";
      } else {
        let price = 20 - this.total;
        return "差￥" + price + "起送";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.shopcart {
  position: fixed;
  z-index: 6;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 48px;
  .content {
    display: flex;
    background: #141d27;
    color: rgba(255, 255, 255, 0.4);
    .content-left {
      flex: 1;
      .logo-wrapper {
        display: inline-block;
        position: relative;
        top: -10px;
        width: 56px;
        height: 56px;
        margin: 0 18px;
        padding: 6px;
        border-radius: 50%;
        background: #141d27;
        box-sizing: border-box;
        vertical-align: top;

        .logo {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: #2b343c;
          text-align: center;
          &.highlight {
            background-color: $e-dblue;
          }
          .icon-shopping_cart {
            line-height: 44px;
            font-size: 24px;
            color: $e-dgrey;
            &.highlight {
              color: $e-white;
            }
          }
        }
        .num {
          position: absolute;
          top: -2px;
          right: 0;
          padding: 0px 4px;
          min-width: 8px;
          height: 16px;
          line-height: 16px;
          border-radius: 10px;
          font-size: 8px;
          color: $e-white;
          background: $e-red;
          text-align: center;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
          // box-shadow: 2px 2px 0 5px rgba(0,0,0,.2),30px 30px 0 0 blueviolet;
        }
      }
      .price {
        display: inline-block;
        margin-top: 12px;
        line-height: 24px;
        padding-right: 12px;
        font-size: 16px;
        font-weight: 700;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        &.highlight {
          color: $e-white;
        }
      }
      .desc {
        display: inline-block;
        margin: 12px 0 0 12px;
        line-height: 24px;
        font-size: 10px;
        &.highlight {
          color: $e-white;
        }
      }
    }
    .content-right {
      flex: 0 0 105px;
      width: 105px;
      .pay {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        background: $e-dblue;
        &.highlight {
          background-color: $e-dblue;
          color: $e-white;
        }
      }
    }
  }
}
</style>